<template>
  <div class="flex border-b pb-2 justify-center">
    <div class="border-r px-4">
      <a-button size="small" type="primary" class="mr-2" ghost :icon="h(CopyOutlined)" @click="onInputModule">输入域</a-button>
      <a-button size="small" type="primary" ghost :icon="h(CopyOutlined)" @click="onAddModule">下拉域</a-button>
    </div>
    <a-divider type="vertical" class="h-full" />
    <div class="flex">
      <div class="flex flex-col mr-3">
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="MedicalExpression1">月经公式1</a-button>
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="MedicalExpression2">月经公式2</a-button>
      </div>
      <div class="flex flex-col mr-3">
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="MedicalExpression3">月经公式3</a-button>
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="MedicalExpression4">月经公式4</a-button>
      </div>
      <div class="flex flex-col mr-3">
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="EyeballProtrusion">眼球突出度</a-button>
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="SquintSymbol">斜视符号</a-button>
      </div>
      <div class="flex flex-col mr-3">
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="MedicalExpression6">胎心图</a-button>
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="MedicalExpression5">瞳孔图</a-button>
      </div>
      <div class="flex flex-col mr-3">
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="MedicalExpression8">恒牙牙位图</a-button>
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="MedicalExpression9">乳牙牙位图</a-button>
      </div>
      <div class="flex flex-col mr-3">
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="MedicalExpression7">标尺公式</a-button>
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="MedicalExpression10">分数公式</a-button>
      </div>
      <div class="flex flex-col mr-3">
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="MedicalExpression11">病变上牙</a-button>
        <a-button size="small" type="text" class="text-left" :icon="h(CopyOutlined)" @click="MedicalExpression12">病变下牙</a-button>
      </div>
    </div>
    <a-modal
      v-model:open="open"
      width="640px"
      destroy-on-close
      title="下拉域"
      :ok-button-props="{ disabled: !isCompleted }"
      ok-text="保存"
      centered
      @ok="onOk"
      @cancel="onCancel"
    >
      <a-tabs v-model:activeKey="activeKey" class="h-80">
        <a-tab-pane key="1" tab="常规">
          <a-form :model="formState" class="form-style-flex mt-3" :label-col="{ style: { width: '120px' } }">
            <a-form-item label="名称（Name）" class="w-1/2" v-bind="validateInfos.dictName">
              <SelectTable
                v-model:value="formState.dictName"
                type="电子病历下拉列表"
                custom-input
                placeholder="请输入"
                @select="onSelect"
                @input-change="getPinyin"
              />
            </a-form-item>
            <a-form-item label="编号" class="w-1/2">
              <a-input v-model:value="formState.dictCode" placeholder="请输入" />
            </a-form-item>
            <a-form-item label="助记码" class="w-full">
              <a-input v-model:value="formState.zjm" placeholder="请输入" />
            </a-form-item>
            <a-form-item label="描述" class="w-full">
              <a-textarea v-model:value="formState.memo" :rows="4" placeholder="请输入" class="w-full" />
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="2" tab="内容" force-render>
          <BaseTable :columns="columns" :data-source="tableData" :height="170">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'itemName'">
                <EditCell title="内容">
                  <a-input v-model:value="record.itemName" placeholder="请输入" />
                </EditCell>
              </template>
              <template v-if="column.dataIndex === 'outOrder'">
                <EditCell title="顺序">
                  <a-input v-model:value="record.outOrder" v-input:int placeholder="请输入" />
                </EditCell>
              </template>

              <template v-else-if="column.dataIndex === 'action'">
                <a-button type="text" size="small" danger @click="onDeleteRow(record)">删除</a-button>
              </template>
            </template>
          </BaseTable>
          <div class="text-center mt-4">
            <a-button type="primary" ghost @click="onAddRow">添加</a-button>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
    <InputArea v-model:open="inputOpen" @success="inputSuccess" />
  </div>
</template>
<script setup>
import { h } from 'vue'
import { CopyOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import useStore from '.././store.js'
import InputArea from './InputArea.vue'

const store = useStore()
const props = defineProps({
  ctl: {
    type: Object,
    default: () => ({})
  }
})
const open = ref(false)
const inputOpen = ref(false)
const activeKey = ref('1')
const tableData = ref([])
const formState = ref({})
const columns = ref([
  { title: '内容', dataIndex: 'itemName' },
  { title: '顺序', dataIndex: 'outOrder' },
  { title: '操作', dataIndex: 'action', width: 60 }
])
const rulesState = ref({
  dictName: [{ required: true, message: '请输入名称' }]
})
const { isCompleted, resetFields, validateInfos } = useForm(formState, rulesState)

const onAddModule = () => {
  open.value = true
  tableData.value = [{ key: Math.random(), dictId: formState.value.id }]
}
const onAddRow = () => {
  tableData.value.push({ key: Math.random(), dictId: formState.value.id })
}
const onDeleteRow = (record) => {
  tableData.value = tableData.value.filter((item) => item.key !== record.key)
}
const onInputModule = () => {
  inputOpen.value = true
}

const onSelect = (select) => {
  formState.value = select
  tableData.value = select.dictItems.map((item) => ({ key: item.id, ...item }))
  !select.zjm && getPinyin()
}
const getPinyin = async () => {
  const { data, code } = await post('/common/util/getPinyin', { name: formState.value.dictName })
  code === 0 && (formState.value.zjm = data)
}
// const getSelectOption = async (id) => {
//   // const { data, msg, code } = await post('/emr/emrTemplateDict/getEmrTemplateDictItemList', { id })
//   // if (code !== 0) return message.error(msg)
//   // tableData.value = data
// }
const onOk = async () => {
  await resetFields()
  const { msg, code } = await post('/emr/emrTemplateDict/doSaveEmrTemplateDict', {
    ...formState.value,
    dictItems: tableData.value,
    dictType: '2', //1 输入域 2 下拉域
    templateId: store.templateId
  })
  if (code !== 0) return message.error(msg)
  message.success('保存成功')
  getXml()
  onCancel()
}
const inputSuccess = async (e) => {
  const { msg, data, code } = await post('/emr/emrTemplate/doInsertInputXML', {
    ...e
  })
  if (code !== 0) return message.error(msg)
  const res = await post('/emr/emrTemplateDict/doSaveEmrTemplateDict', {
    ...e,
    dictType: '1', //1 输入域 2 下拉域
    templateId: store.templateId
  })
  if (res.code !== 0) return message.error(res.msg)
  message.success('保存成功')
  const res1 = props.ctl.InsertXmlString(data)
  res1 ? message.success('插入成功') : message.error('插入失败')
  inputOpen.value = false
}
const getXml = async () => {
  const { msg, code, data } = await post('/emr/emrTemplate/doInsertDropDownListXML', {
    ...formState.value,
    dictItems: tableData.value,
    templateId: store.templateId
  })
  if (code !== 0) return message.error(msg)
  const res = props.ctl.InsertXmlString(data)
  res ? message.success('插入成功') : message.error('插入失败')
}

const onCancel = () => {
  open.value = false
  formState.value = {}
  tableData.value = []
  activeKey.value = '1'
  resetFields()
}
//月经史公式1
function MedicalExpression1() {
  const options = {
    ID: 'expression1',
    ExpressionStyle: 'FourValues1',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values: 'Value1:14;Value2:14;Value3:14;Value4:14'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//月经史公式2
function MedicalExpression2() {
  const options = {
    ID: 'expression2',
    ExpressionStyle: 'FourValues2',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values: 'Value1:14;Value2:14;Value3:14;Value4:14'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//月经史公式3
function MedicalExpression3() {
  const options = {
    ID: 'expression3',
    ExpressionStyle: 'ThreeValues',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values: 'Value1:14;Value2:14;Value3:14'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//月经史公式4
function MedicalExpression4() {
  const options = {
    ID: 'expression4',
    ExpressionStyle: 'FourValues',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values: 'Value1:14;Value2:14;Value3:14;Value4:14'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//眼球突出度
function EyeballProtrusion() {
  const options = {
    ID: 'expression7',
    ExpressionStyle: 'ThreeValues2',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values: 'Value1:0;Value2:1;Value3:2;'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//斜视符号
function SquintSymbol() {
  const options = {
    ID: 'expression8',
    ExpressionStyle: 'StrabismusSymbol',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values: 'Value1:L;'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//胎心
function MedicalExpression6() {
  const options = {
    ID: 'expression6',
    ExpressionStyle: 'FetalHeart',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values: 'Value1:14;Value2:14;Value3:14;Value4:14;Value5:14;Value6:14;'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//瞳孔
function MedicalExpression5() {
  const options = {
    ID: 'expression5',
    ExpressionStyle: 'Pupil',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values: 'Value1:14;Value2:14;Value3:14;Value4:14;Value5:14;Value6:14;Value7:14;'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//标尺
function MedicalExpression7() {
  const options = {
    ID: 'expression9',
    ExpressionStyle: 'PainIndex',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values: 'Value1:14;'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//恒牙牙位图
function MedicalExpression8() {
  const options = {
    ID: 'expression10',
    ExpressionStyle: 'PermanentTeethBitmap',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values:
      'Value1:1;Value2:2;Value3:3;Value4:4;Value5:5;Value6:6;Value7:7;Value8:8;Value9:9;Value10:10;Value11:11;Value12:12;Value13:13;Value14:14;Value15:15;Value16:16;Value17:17;Value18:18;Value19:19;Value20:20;'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//乳牙牙位图
function MedicalExpression9() {
  const options = {
    ID: 'expression11',
    ExpressionStyle: 'DeciduousTeech',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values:
      'Value1:1;Value2:2;Value3:3;Value4:4;Value5:5;Value6:6;Value7:7;Value8:8;Value9:9;Value10:10;Value11:11;Value12:12;Value13:13;Value14:14;Value15:15;Value16:16;Value17:17;Value18:18;Value19:19;Value20:20;'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//分数公式
function MedicalExpression10() {
  const options = {
    ID: 'expression12',
    ExpressionStyle: 'Fraction',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values: 'Value1:1;Value2:2;'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//病变上牙
function MedicalExpression11() {
  const options = {
    ID: 'expression13',
    ExpressionStyle: 'DiseasedTeethTop',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values: 'Value1:1;Value2:2;Value3:2;'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
//病变下牙
function MedicalExpression12() {
  const options = {
    ID: 'expression14',
    ExpressionStyle: 'DiseasedTeethBotton',
    Type: 'XTextNewMedicalExpressionElement',
    FontSize: '12',
    Width: '112px',
    Height: '46px',
    Values: 'Value1:1;Value2:2;Value3:2;'
  }
  props.ctl.DCExecuteCommand('insertmedicalexpression', true, options)
}
</script>
<style>
.dcTool-close {
  font-family: '微软雅黑';
}
</style>
